body {
  background-color: #F5F6F7;
}

.top {
  width: 100%;
  height: 230rpx;
  background-color: #3376F2;
  padding-top: 90rpx;
}

.circle-avatar {
  width: 140px; /* 头像的宽度 */
  height: 150px; /* 头像的高度 */
  border-radius: 60% / 60%; /* 设置为圆形 */
  object-fit: cover; /* 确保图像充满整个圆形区域，同时保持比例 */
  border: 9rpx solid #7DA0EB; /* 可选：添加边框 */
  margin-left: 50rpx;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 60% / 60%;
}

.avatar1 {
  width: 70%;
  height: 70%;
  border-radius: 50%;
}

.camera {
  border-radius: 50%;
  background-color: #fff;
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  top: 200rpx;
  left: 150rpx;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.name {
  font-size: 46rpx;
  font-weight: bold;
  color: #fff;
  position: relative;
  top: -200rpx;
  left: 250rpx;
}

.signature {
  font-size: 32rpx;
  color: #fff;
  position: relative;
  top: -185rpx;
  left: 250rpx;
}

.map-pin {
  width: 45rpx;
  height: 35rpx;
}

.position {
  width: 180rpx;
  height: 55rpx;
  border-radius: 50px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  color: #fff;
  background-color: #417bf0;
  position: relative;
  top: -160rpx;
  left: 245rpx;
  font-size: 27rpx;
  padding: 10rpx;
}

.team {
  width: 190rpx;
  height: 55rpx;
  border-radius: 50px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  color: #fff;
  background-color: #417bf0;
  position: relative;
  top: -230rpx;
  left: 470rpx;
  font-size: 27rpx;
  padding: 10rpx;
}

.edit {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  position: relative;
  top: -440rpx;
  left: 645rpx;
  background-color: #417bf0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px; /* 设置网格项之间的间距 */
  width: 95%;
  height: 400px;
  margin: 0 auto;
  padding: 20rpx;
}

.view {
  background-color: #fff;
  font-size: 20px;
  margin: 10rpx;
  border-radius: 20rpx;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 220rpx;
}

/* 设置田字布局 */
.view-top-left {
  grid-column: 1;
  grid-row: 1;
}

.view-top-right {
  grid-column: 2;
  grid-row: 1;
}

.view-bottom-left {
  grid-column: 1;
  grid-row: 2;
}

.view-bottom-right {
  grid-column: 2;
  grid-row: 2;
}

.icon-view {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin: 30rpx;
}

.text-view{
  font-size: 32rpx;
  margin: 30rpx;
}

.text2{
  font-weight: bold;
  margin-left: 30rpx;
}

.bgcolor1{
  background-color: #EFF6FF;
}

.bgcolor2{
  background-color: #FAF5FF;
}

.bgcolor3{
  background-color: #FFFBEB;
}

.bgcolor4{
  background-color: #ECFDF5;
}

.icon4 {
  width: 50rpx;
  height: 45rpx;
}

.activity {
  background-color: #fff;
  font-size: 20px;
  border-radius: 20rpx;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 88%;
  height: auto;
  padding: 20rpx;
  margin: 100rpx 30rpx;
}

.activity-title {
  font-size: 35rpx;
  font-weight: bold;
  margin: 10rpx 10rpx 50rpx;
}

.activity-view{
  height: 150rpx;
}

.activity-img{
  width: 50rpx;
  height: 50rpx;
}

.img-view{
  width: 100rpx;
  height: 100rpx;
  background-color: #f3f4f6;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  border-radius: 15rpx;
  margin: 20rpx;
}

.titlename{
  font-size: 32rpx;
  position: relative;
  top: -110rpx;
  left: 155rpx;
}

.activitydate{
  font-size: 27rpx;
  position: relative;
  top: -100rpx;
  left: 155rpx;
}

.right-arrow{
  position: relative;
  top: -170rpx;
  left: 90%;
}

.page-bottom{
  height: 50rpx;
}
